<!--
 * @Author: asushiye
 * @Date: 2020-07-02 15:30:23
 * @Commit: file content
-->
<page-header autoTitle="false" />

<nz-card>
  <form nz-form nzLayout="inline" se-container>
    <se label="数据源" labelWidth="0">
      <input nz-input name="dbSourceName" placeholder="请输入数据源名, 支持模糊查询" [(ngModel)]="queryParams.dbSourceName" />
    </se>
    <se>
      <button nz-button nzType="primary" (click)="query()" [nzLoading]="isLoading">查询</button>
      <button nz-button [nzType]="'default'" (click)="add()">
        <i nz-icon nzType="plus-circle"></i>
        <span>新建</span>
      </button>
      <button nz-button nzType="default" (click)="importData()" [nzLoading]="isLoading">
        <span>导入</span>
        <i nz-icon nzType="import"></i>
      </button>
      <button nz-button nzType="default" (click)="exportData()" [nzLoading]="isExporting">
        <span>导出</span>
        <i nz-icon nzType="export"></i>
      </button>
      <button nz-button [nzType]="'default'" (click)="downloadTemplate()">
        <span>下载模板</span>
        <i nz-icon nzType="download"></i>
      </button>

      <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzLoading]="isLogExporting">
        历史日志
        <i nz-icon nzType="down"></i>
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item>
            <a (click)="exportLog()"> 下载当前日志 </a>
          </li>
          <li nz-menu-item>
            <a (click)="navUploadLogView()">历史上传记录 </a>
          </li>
        </ul>
      </nz-dropdown-menu>
    </se>
  </form>
  <st #st [data]="rows" [columns]="columns" [expand]="expand" [ps]="20" size="small" expandRowByClick expandAccordion>
    <ng-template #expand let-item let-index="index" let-column="column">
      <sv-container size="small" col="3">
        <sv-title>更多内容</sv-title>
        <sv label="链接信息" type="success" col="2">{{ item!.jdbcUrl }}</sv>
        <sv label="元数据格式" type="danger">{{ caseStatusName(item.caseStatus) }}</sv>
        <sv label="数据库描述">{{ item!.dbSourceDesc }}</sv>
        <sv label="驱动">{{ item!.driverClassName }}</sv>
        <sv label="链接类型">{{ item!.dbLinkType }}</sv>
        <sv label="用户名">{{ item!.username }}</sv>
        <sv label="密码" optionalHelp="点击查看"> <a class="lg-sm" (click)="msg.msg_success(item!.password)">******</a></sv>
        <sv label="创建人">{{ item!.createdBy }}</sv>
        <sv label="创建时间">{{ item!.createdDate }}</sv>
        <sv label="扩展参数" col="2">{{ item!.extParams }}</sv>
      </sv-container>
    </ng-template>
  </st>
</nz-card>

<nz-drawer
  [nzSize]="drawerOption.size"
  [nzVisible]="drawerOption.visible"
  [nzTitle]="drawerOption.title"
  nzPlacement="right"
  [nzFooter]="drawerTemplate"
  (nzOnClose)="closeDrawer()"
>
  <ng-container *nzDrawerContent>
    <form nz-form [nzAutoTips]="autoTips" [formGroup]="tForm">
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="dbSourceName" nzRequired>数据源名称</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your dbSourceName">
          <input formControlName="dbSourceName" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="dbSourceDesc" nzRequired>数据源描述</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your dbSourceDesc">
          <input formControlName="dbSourceDesc" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="dbType" nzRequired>数据库类型</nz-form-label>
        <nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="Please input your dbType">
          <nz-select formControlName="dbType" name="dbType" (ngModelChange)="dbTypeChange($event)" nzPlaceHolder="" nzAllowClear>
            <nz-option *ngFor="let item of databases" [nzLabel]="item.dataBase" [nzValue]="item.dataBase" />
          </nz-select>
        </nz-form-control>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="dbLinkType" nzTooltipTitle="oracle数据库的链接类型，支持server和sid的方式"
          >链接类型</nz-form-label
        >
        <nz-form-control [nzSm]="{ span: 6, offset: 0 }" [nzXs]="24" nzErrorTip="Please input your dbLinkType">
          <nz-select formControlName="dbLinkType" (ngModelChange)="dbLinkTypeChange($event)" nzPlaceHolder="" nzAllowClear>
            <nz-option [nzLabel]="'server'" [nzValue]="'server'" />
            <nz-option [nzLabel]="'sid'" [nzValue]="'sid'" />
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="driverClassName" nzRequired>驱动名称</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your driverClassName">
          <input formControlName="driverClassName" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="host" nzRequired>主机</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your host">
          <input formControlName="host" nz-input placeholder="" />
        </nz-form-control>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="port" nzRequired>端口</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your port">
          <nz-input-number formControlName="port" name="port" [nzPlaceHolder]="''" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="dbName" nzRequired>库名称</nz-form-label>
        <nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="Please input your dbName">
          <input formControlName="dbName" nz-input placeholder="" />
        </nz-form-control>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="dbSchema">{{ schemaName }}</nz-form-label>
        <nz-form-control [nzSm]="{ span: 6, offset: 0 }" [nzXs]="24" nzErrorTip="Please input your dbSchema">
          <input formControlName="dbSchema" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="username" nzRequired>用户</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your username">
          <input formControlName="username" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your password">
          <input formControlName="password" type="password" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="extParams" nzTooltipTitle="由多个参数名=参数值组成，使用&符号分隔"
          >扩展参数</nz-form-label
        >
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your extParams">
          <input formControlName="extParams" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="caseStatus" nzTooltipTitle="">元数据格式</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your dbLinkType">
          <nz-select formControlName="caseStatus" nzPlaceHolder="" nzAllowClear>
            <nz-option [nzLabel]="'小写'" [nzValue]="0" />
            <nz-option [nzLabel]="'原样'" [nzValue]="1" />
            <nz-option [nzLabel]="'大写'" [nzValue]="2" />
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-drawer>

<ng-template #drawerTemplate>
  <button nz-button nzType="default" (click)="testLinkClick()" [nzLoading]="isLoading" [disabled]="tForm.invalid">
    <i nz-icon nzType="save"></i> 测试链接</button
  >
  <button nz-button nzType="primary" (click)="save()" [nzLoading]="isLoading" [disabled]="tForm.invalid">
    <i nz-icon nzType="save"></i> 保存</button
  >
  <button style="float: right" nz-button nzType="default" (click)="closeDrawer()">关闭</button>
</ng-template>
